<template>
  <div>
    <!-- 
      <div>token: {{$store.state.user.token}}</div>
      <div>appName:{{$store.state.setting.name}}</div> 
    -->
    <div>token: {{ token }}</div>
    <div>appName:{{ name }}</div>
    <!-- <button @click="$store.commit('removeData')">清空数据(全局目前报错)</button>
    <button @click="$store.commit('user/removeData')">清空数据(user)</button>

    <button @click="$store.commit('setting/removeData')">
      清空数据(setting)
    </button> -->
    <button @click="removeData">清空数据(setting)</button>
    <button @click="userRemoveData">清空数据(user)</button>
  </div>
</template>

<script>
// 不引入全局的 mapMutations 反而引入一个生产辅助函数的方法
import { mapGetters, mapMutations, createNamespacedHelpers } from "vuex";
const { mapMutations: userMapMutations } = createNamespacedHelpers("user");
export default {
  computed: {
    ...mapGetters(["token", "name"]),
  },
  methods: {
    // 直接用, 由于已经是基于user模块, 不需要有什么模块路径了
    ...mapMutations("setting", ["removeData"]),
    ...userMapMutations({
      userRemoveData: "removeData",
    }),
  },
};
</script>

<style></style>
